<template>
	<el-dialog @close="close" :title="(form.customeruid?'编辑':'新建')+(type==1?'线索':'客户')" top="15vh" :visible.sync="visible" width="700px" center>
		<div class="dialog-content">
			<div class="clear">
				<div class="form-item">
					<p class="form-item-title"><span class="red">*</span>客户名称：</p>
					<div class="form-item-content">
						<el-input maxlength="4" :show-word-limit="true" v-model="form.customername" placeholder="请输入"></el-input>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title"><span class="red">*</span>联系电话：</p>
					<div class="form-item-content">
						<el-input maxlength="11" :show-word-limit="true" v-model="form.linkphone" placeholder="请输入"></el-input>
					</div>
				</div>
			</div>
			<div class="clear">
				<div class="form-item">
					<p class="form-item-title"><span class="red">*</span>集团名称：</p>
					<div class="form-item-content">
						<el-input maxlength="50" :show-word-limit="true" v-model="form.companyname" placeholder="请输入"></el-input>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">号码归属地：</p>
					<div class="form-item-content">
						<el-input maxlength="20" :show-word-limit="true" v-model="form.phonearea" placeholder="请输入"></el-input>
					</div>
				</div>
			</div>
			<div class="clear" v-if="type!=1">
				<div class="form-item">
					<p class="form-item-title">客户类别：</p>
					<div class="form-item-content">
						<el-select disabled v-model="form.customertype" placeholder="请选择">
							<el-option key="1" label="A类客户" :value="1"></el-option>
							<el-option key="2" label="B类客户" :value="2"></el-option>
							<el-option key="3" label="C类客户" :value="3"></el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="clear">
				<div class="form-item">
					<p class="form-item-title">所属行业：</p>
					<div class="form-item-content clear" style="width: 220px;">
						<el-cascader v-model="cascaderValue" ref="cascader" @change="businessChange" style="width:220px" :props="props"></el-cascader>
					</div>
				</div>
			</div>
			<div class="clear">
				<div class="form-item">
					<p class="form-item-title">微信号：</p>
					<div class="form-item-content">
						<el-input maxlength="50" :show-word-limit="true" v-model="form.wechat" placeholder="请输入"></el-input>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">QQ号：</p>
					<div class="form-item-content">
						<el-input maxlength="11" :show-word-limit="true" v-model="form.qq" placeholder="请输入"></el-input>
					</div>
				</div>
			</div>
			<div class="clear">
				<div class="form-item">
					<p class="form-item-title">邮箱：</p>
					<div class="form-item-content">
						<el-input type="email" v-model="form.email" placeholder="请输入"></el-input>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">生日：</p>
					<div class="form-item-content">
						<el-date-picker style="width:180px;" clearable v-model="form.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
					</div>
				</div>
			</div>
			<div class="clear">
				<div class="form-item">
					<p class="form-item-title">企业规模：</p>
					<div class="form-item-content">
						<el-input pattern="[0-9]" maxlength="6" min="1" step="1" max="100000" style="width:160px;display:inline-block;" v-model="form.scale" placeholder="请输入"></el-input>
						人
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">公司网址：</p>
					<div class="form-item-content">
						<el-input maxlength="50" :show-word-limit="true" v-model="form.website" placeholder="请输入"></el-input>
					</div>
				</div>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" plain @click="close">取 消</el-button>
		    <el-button type="primary" @click="confirmAddCustomer">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import { phoneReg,emailReg} from '@/utils/common'
	export default {
		name: 'AddOreditCustomer',
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			type: {
				type: Number,
				default: 1,
			}, //1 线索  2公海  3客户
			customerData: {
				type: Object,
				default: () => {
					return {}
				},
			},
		},
		watch: {
			show() {
				if(this.show){
					this.form = Object.assign({
						customeruid:'',
						companyname:'',
						customername:'',
						linkphone:'',
						phonearea:'',
						customertype:'',
						tradeuid:'',
						tradename:'',
						tradedetailuid:'',
						tradedetail:'',
						wechat:'',
						qq:'',
						email:'',
						birthday:'',
						website:'',
						category:this.type,
					}, this.customerData)
					console.log(this.form)
				}
				if(this.form.tradeuid&&!this.form.tradedetailuid){
					this.cascaderValue=[Number(this.form.tradeuid)]
				}else if(this.form.tradedetailuid){
					this.cascaderValue=[Number(this.form.tradeuid),Number(this.form.tradedetailuid)]
				}else{
					this.cascaderValue=''
				}
				console.log(this.cascaderValue)
				this.visible = this.show
			}
		},
		data() {
			const that=this
			return {
				visible: false,
				network:false,
				cascaderValue:'',
				props: {
		          lazy: true,
		          value:'crmconfiguid',
		          label:'name',
		          checkStrictly:true,
		          lazyLoad (node, resolve) {
		            const { level } = node;
		            that.$request.queryConfigList({
		            	type:5,
		            	parentid:level==0?0:node.value
		            }).then(res=>{
		            	if(res.code==0){
		            		res.list.forEach(item=>{
		            			item.leaf=item.parentid>0
		            		})
		            		resolve(res.list)
		            	}
		            	else{
		            		resolve([])
		            	}
		            })
		          }
		        },
				form: {
					customeruid:'',
					companyname:'',
					customername:'',
					linkphone:'',
					phonearea:'',
					customertype:'',
					tradeuid:'',
					tradename:'',
					tradedetailuid:'',
					tradedetail:'',
					wechat:'',
					qq:'',
					email:'',
					birthday:'',
					website:'',
					category:this.type,
				}
			}
		},
		methods: {
			close() {
				this.$emit('closeEditCustomer')
			},
			businessChange(val){
				var result=this.$refs.cascader.getCheckedNodes()[0]
				if(result.path.length==1){
					this.form.tradeuid=result.path[0]
					this.form.tradename=result.pathLabels[0]
					this.form.tradedetailuid=''
					this.form.tradedetail=''
				}else{
					this.form.tradeuid=result.path[0]
					this.form.tradename=result.pathLabels[0]
					this.form.tradedetailuid=result.path[1]
					this.form.tradedetail=result.pathLabels[1]
				}
				this.$refs.cascader.dropDownVisible = false;
				console.log(this.cascaderValue)
			},
			confirmAddCustomer() {
				if(this.network){
					return
				}
				if(!this.form.customername){
					this.msgError('请输入客户名称')
					return
				}
				if(!this.form.linkphone){
					this.msgError('请输入联系电话')
					return
				}
				if(!phoneReg.test(this.form.linkphone)){
					this.msgError('联系电话格式错误')
					return
				}
				if(!this.form.companyname){
					this.msgError('请输入集团名称')
					return
				}
				if(this.form.email&&!emailReg.test(this.form.email)){
					this.msgError('邮箱格式错误')
					return
				}
				this.network=true
				console.log(this.form)
				if(!this.form.customeruid){
					this.$request.addCustomer(this.form)
					.then(res=>{
						if(res.code==0){
							this.msgSuccess('新建成功')
							this.$emit('closeEditCustomer')
							this.$emit('updateSuccess')
						}else{
							this.msgError(res.msg)
						}
						this.network=false
					})
				}else{
					this.$request.updateCustomer(this.form)
					.then(res=>{
						if(res.code==0){
							this.msgSuccess('编辑成功')
							this.$emit('closeEditCustomer')
							this.$emit('updateSuccess')
						}else{
							this.msgError(res.msg)
						}
						this.network=false
					})
				}
			},
		}
	}
</script>

<style scoped="" lang="scss">
	>>>.el-dialog__header {
		padding: 16px 20px 16px 30px;
		text-align: left;
		font-weight: bold;
	}
	
	>>>.el-dialog__body {
		padding: 0 16px 10px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 184px;
			>.clear {
				margin-bottom: 20px;
				.form-item {
					margin-bottom: 0px;
					float: left;
					.form-item-title {
						width: 100px;
					}
					.form-item-content {
						width: 180px;
					}
				}
			}
		}
	}
</style>